<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <h1>{{arr}}</h1>
        <ul>
            <!-- v-for可以遍历数组 数组的每一项  下标  in/of  数组的变量名
            :key遍历渲染的唯一标识   （不能重复具有唯一性）
            -->
            <li v-for="(item,index) of arr" :key="index">
                {{index}}----{{item}}
            </li>
        </ul>
        <!-- v-for可以遍历对象  对象的value值（属性值） 对象的key(属性名)  下标 -->
        <ul>
            <li v-for="(value,key,index) of obj" :key="index">
                {{index}}  ----{{key}}---{{value}}
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in arrObj" :key="index">
                {{index}}---{{item.name}}---{{item.msg}}
            </li>
        </ul>
    </div>
    <script>
        /* v-for 作用：可以遍历数组和对象 */
        const vm = new Vue({
            el:'.box',
            data:{
                arr:[1,2,3],
                obj:{
                    name:'猴子',
                    msg:'我想走神了',
                    biaoqing:'很微妙！！'
                },
                arrObj:[
                    {name:'hanhan',msg:'去后面努力学习'},
                    {name:'lele',msg:'你欢迎涵涵吗？？'},
                    {name:'shuaiqi',msg:'欢迎你的到来！！'}
                ]
            }
        })
    </script>
</body>
</html>